<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <ContentWrap>
      <el-row :gutter="20" class="mb-20px">
        <el-col :span="24">
          <div class="page-header">
            <div class="header-left">
              <el-icon size="24" color="#409EFF">
                <ep-reading />
              </el-icon>
              <h2 class="page-title">绘本管理</h2>
            </div>
            <el-tag type="info">小程序管理模块</el-tag>
          </div>
        </el-col>
      </el-row>
    </ContentWrap>

    <!-- 搜索栏 -->
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form-item label="绘本名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入绘本名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="queryParams.category" placeholder="请选择分类" clearable style="width: 150px">
            <el-option label="启蒙教育" value="enlightenment" />
            <el-option label="科普知识" value="science" />
            <el-option label="童话故事" value="fairy-tale" />
            <el-option label="历史文化" value="history" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="已发布" value="published" />
            <el-option label="草稿" value="draft" />
            <el-option label="已下架" value="offline" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><ep-search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><ep-refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 操作栏 -->
    <ContentWrap>
      <div class="mb-20px">
        <el-button type="primary" @click="handleAdd">
          <el-icon><ep-plus /></el-icon>
          新增绘本
        </el-button>
        <el-button type="success" @click="handleBatchPublish" :disabled="!multipleSelection.length">
          <el-icon><ep-upload /></el-icon>
          批量发布
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="!multipleSelection.length">
          <el-icon><ep-delete /></el-icon>
          批量删除
        </el-button>
      </div>
    </ContentWrap>

    <!-- 数据表格 -->
    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="pictureBookList"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="cover" label="封面" width="100">
          <template #default="{ row }">
            <el-image
              :src="row.cover"
              :preview-src-list="[row.cover]"
              style="width: 60px; height: 80px"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="绘本名称" min-width="150" />
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="category" label="分类" width="100">
          <template #default="{ row }">
            <el-tag :type="getCategoryType(row.category)">
              {{ getCategoryLabel(row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="readCount" label="阅读量" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="success" size="small" @click="handlePreview(row)">
              预览
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <Pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>

    <!-- 示例说明 -->
    <ContentWrap>
      <el-alert
        title="功能说明"
        type="info"
        :closable="false"
        show-icon
      >
        <template #default>
          <p><strong>绘本管理功能包括：</strong></p>
          <ul>
            <li>📚 绘本信息管理：支持添加、编辑、删除绘本信息</li>
            <li>🏷️ 分类管理：支持启蒙教育、科普知识、童话故事、历史文化等分类</li>
            <li>📊 数据统计：显示阅读量、收藏数等统计信息</li>
            <li>🔍 搜索筛选：支持按名称、分类、状态等条件筛选</li>
            <li>📱 小程序同步：支持将绘本内容同步到小程序端</li>
            <li>👀 预览功能：支持在线预览绘本内容</li>
          </ul>
        </template>
      </el-alert>
    </ContentWrap>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDate } from '@/utils/formatTime'

defineOptions({ name: 'MiniprogramPictureBook' })

// 响应式数据
const loading = ref(false)
const total = ref(0)
const pictureBookList = ref<any[]>([])
const multipleSelection = ref<any[]>([])

// 查询参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  name: '',
  category: '',
  status: ''
})

// 获取分类标签
const getCategoryLabel = (category: string) => {
  const map = {
    'enlightenment': '启蒙教育',
    'science': '科普知识',
    'fairy-tale': '童话故事',
    'history': '历史文化'
  }
  return map[category] || category
}

// 获取分类类型
const getCategoryType = (category: string) => {
  const map = {
    'enlightenment': 'primary',
    'science': 'success',
    'fairy-tale': 'warning',
    'history': 'info'
  }
  return map[category] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const map = {
    'published': '已发布',
    'draft': '草稿',
    'offline': '已下架'
  }
  return map[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const map = {
    'published': 'success',
    'draft': 'warning',
    'offline': 'danger'
  }
  return map[status] || 'info'
}

// 获取列表数据
const getList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 模拟数据
    pictureBookList.value = [
      {
        id: 1,
        name: '小红帽的故事',
        author: '格林兄弟',
        category: 'fairy-tale',
        cover: 'https://picsum.photos/200/300?random=1',
        readCount: 1250,
        status: 'published',
        createTime: formatDate(new Date(Date.now() - 86400000))
      },
      {
        id: 2,
        name: '恐龙世界探秘',
        author: '科普编辑部',
        category: 'science',
        cover: 'https://picsum.photos/200/300?random=2',
        readCount: 890,
        status: 'published',
        createTime: formatDate(new Date(Date.now() - 172800000))
      },
      {
        id: 3,
        name: '数字启蒙游戏',
        author: '教育专家',
        category: 'enlightenment',
        cover: 'https://picsum.photos/200/300?random=3',
        readCount: 567,
        status: 'draft',
        createTime: formatDate(new Date(Date.now() - 259200000))
      }
    ]
    total.value = 3
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    name: '',
    category: '',
    status: ''
  }
  getList()
}

// 新增
const handleAdd = () => {
  ElMessage.success('打开新增绘本对话框')
}

// 编辑
const handleEdit = (row: any) => {
  ElMessage.success(`编辑绘本：${row.name}`)
}

// 预览
const handlePreview = (row: any) => {
  ElMessage.success(`预览绘本：${row.name}`)
}

// 删除
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除绘本"${row.name}"吗？`, '确认删除', {
      type: 'warning'
    })
    ElMessage.success('删除成功')
    getList()
  } catch {
    ElMessage.info('取消删除')
  }
}

// 批量发布
const handleBatchPublish = () => {
  ElMessage.success(`批量发布 ${multipleSelection.value.length} 个绘本`)
}

// 批量删除
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${multipleSelection.value.length} 个绘本吗？`, '确认删除', {
      type: 'warning'
    })
    ElMessage.success('批量删除成功')
    getList()
  } catch {
    ElMessage.info('取消删除')
  }
}

// 选择变化
const handleSelectionChange = (selection: any[]) => {
  multipleSelection.value = selection
}

// 生命周期
onMounted(() => {
  getList()
})
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}
</style>
